<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=750,user-scalable=no" />
		<meta name="format-detection" content="telephone=no">
		<title>网点地图</title>
		<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
		<script type="text/javascript" src="http://api.map.baidu.com/api?key=3ec5a840118dff92816396989a7159e0&v=1.2&services=true"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/settlement.css"/>
	</head>
	<body style="background: #f3f3f3;">
		<div class="wrapper">
			<div class="content">
				<div class="map" style="background: #ffffff;">
					<div class="show-right">
						<div id="map" style="width:100%;height:100%;"></div>
					</div>
					
					<div class="search-box">
						<input type="text" placeholder="输入地点关键字查询仓点" class="search-input"/>
						<input type="button" value="确定" class="search-btn"/>
					</div>
				</div>
				
				<div class="barn-place">
					<div class="barn-tit">金刚迷你仓仓点</div>
					<div class="place-lists">
						<div class="left-cont">
							<div class="pla-name">千灯湖</div>
							<div class="pla-address">南海区  桂城街道  灯湖西路20号</div>
						</div>
						<div class="right-cont">地图指引</div>
					</div>
					<div class="place-lists">
						<div class="left-cont">
							<div class="pla-name">千灯湖</div>
							<div class="pla-address">南海区  桂城街道  灯湖西路20号</div>
						</div>
						<div class="right-cont">地图指引</div>
					</div>
				</div>
			</div>
		</div>
		
		<script type="text/javascript">
			var map = new BMap.Map("map");
			map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
			var local = new BMap.LocalSearch(map, {
				renderOptions: { map: map }
			});
			
			map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放
			map.enableKeyboard(); // 开启键盘控制
			map.enableContinuousZoom(); // 开启连续缩放效果
			map.enableInertialDragging(); // 开启惯性拖拽效果
			map.addControl(new BMap.NavigationControl()); //添加标准地图控件(左上角的放大缩小左右拖拽控件)
			map.addControl(new BMap.ScaleControl()); //添加比例尺控件(左下角显示的比例尺控件)
			map.addControl(new BMap.OverviewMapControl()); // 缩略图控件
			// map.addControl(new BMap.MapTypeControl());
			
			var content = '';
			var searchInfoWindow = null;
//			searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
//				title: "广东省佛山市南海区桂城桂澜路亿能国际广场6层", //标题
//				width: 0, //宽度
//				height: 0, //高度
//				panel: "panel", //检索结果面板
//				enableAutoPan: true, //自动平移
//				searchTypes: []
//			});
			
			var myGeo = new BMap.Geocoder();
			// 将地址解析结果显示在地图上,并调整地图视野
			myGeo.getPoint("广东省佛山市南海区桂城桂澜路亿能国际广场6层", function(point) {
				if(point) {
					map.centerAndZoom(point, 30);
					marker = new BMap.Marker(point)
					marker.addEventListener("click", function(e) {
						searchInfoWindow.open(marker);
					})
					map.addOverlay(marker);
					searchInfoWindow.open(marker); //在marker上打开检索信息串口
				}
			});
		</script>
	</body>
</html>
